<template>
<view class="miou-idle-order" :style="'height:'+windowHeight+'px'">
	<view class="mix-page-header" >
		<view class="content row" 
			:style="{
				paddingRight: headerPaddingRight + 'px',
				paddingTop: statusBarHeight + 'px',
				height: navigationBarHeight + statusBarHeight + 'px'
			}"
		>
			<view class="location-box flex text-black"  @tap="BackPage">
				<view class="cuIcon-back"></view>
			</view>
			<view class="search-wrap center">
				<scroll-view scroll-x 
					class="bg-white nav" 
					scroll-with-animation 
					:scroll-left="scrollLeft"
					>
					<view class="cu-item" 
						:class="index==tabCurrentIndex?'cur':''" 
						v-for="(item,index) of navList" 
						:key="index" 
						@tap="tabSelect" 
						:data-id="index">
						{{ item.text }}
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 占位栏 -->
		<view :style="[{minHeight: navigationBarHeight+statusBarHeight+'px'}]"></view>
	</view>
		
		
		
		
		
	<!-- 显示区域 -->
	<swiper :current="tabCurrentIndex" 
		class="swiper-box"
		duration="300" 
		:style="[{height:'calc(100vh - '+ navigationBarHeight + 'px)'},{top: navigationBarHeight + 'px'}]"
		@change="changeTab">
		<swiper-item class="tab-content"
			v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
			<scroll-view 
				class="list-scroll-content" 
				scroll-y
				@scrolltolower="loadData"
			>
			
				<!-- 订单列表 -->
				<view class="scen-list" v-if="tabItem.list && tabIndex==0">
					<block v-for="(order,index) of tabItem.list" :key="index">
						<LeisurelyIssuer :order="order" 
							@soldOut="idleOffshelve"
							@refreshTime="idleRefreshTime"
						></LeisurelyIssuer>
					</block>
				</view>
				<view class="scen-list" v-if="tabItem.list&& tabIndex!=0">
					<block v-for="(order,index) of tabItem.list" :key="index">
						<LeisurelyOrder :order="order"
							:mystatus="tabIndex"
							@confirmDelivery="deliveryDialog"
							@confirmReceipt="confirmReceipt"
							@confirmContact="confirmContact"
							@confirmAftermarket="confirmAftermarket"
							
						></LeisurelyOrder>
					</block>
				</view>
				
				<!-- 空白页 -->
				<empty v-if="tabItem.loaded === true && tabItem.list.length === 0"></empty>
				<uni-load-more v-else :status="tabItem.loadingType"></uni-load-more>
			</scroll-view>
		</swiper-item>

	</swiper>
	
	
	<view class="cu-modal" :class="modalName=='DialogDelivery'?'show':''">
		<view class="cu-dialog bg-white ">
			<view class="cu-bar bg-white justify-end">
				<view class="content text-bold text-black">确认发货</view>
			</view>
			<view class="padding-lr-xl padding-bottom">
				<view class="cu-btn block line-gray lg round margin-top">
				   <input class="uni-input"
						placeholder="请输入快递公司名称" 
						name="couriercompany"
						@blur="inputChange"
						confirm-type="next"
						data-key="couriercompany" 
				   />
				</view>
				<view class="cu-btn block line-gray lg round margin-top">
				   <input class="uni-input"
						placeholder="请输入快递单号" 
						name="courierNumber"
						@blur="inputChange"
						confirm-type="next"
						data-key="courierNumber"
				   />
				</view>
			</view>
			<view class="cu-bar bg-white justify-end solid-top">
				<view class="action">
					<button class="cu-btn line-cyan text-cyan" @tap="hideModal">取消</button>
					<button class="cu-btn bg-cyan margin-left" @tap="onDelivery">提交</button>
				</view>
			</view>
		</view>
	</view>
</view>
</template>


<script>
import LeisurelyOrder from '@/components/box/LeisurelyOrder.vue';
import LeisurelyIssuer from '@/components/box/LeisurelyIssuer.vue';

import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import empty from "@/components/basics/empty.vue";
import { Leisurely } from '@/models/leisurely.js';

export default {
	name: 'myActivity',
	components: {
		LeisurelyOrder,
		LeisurelyIssuer,
		uniLoadMore,
		empty
	},
	data() {
		return {
			modalName: '',
			windowHeight: 667,
			tabCurrentIndex: 0,
			scrollLeft: 0,
			navList: [
				{
					api: 'myReleaseIdleOrder',
					text: '我发布的',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					api: 'mySellIdleOrder',
					text: '我卖出的',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					api: 'myBuyIdleOrder',
					text: '我买到的',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				}
			],
			courier: {}
		};
	},
	computed: {
		statusBarHeight(){
			return this.systemInfo.statusBarHeight
		},
		navigationBarHeight(){
			return this.systemInfo.navigationBarHeight;
		},
		customWidth(){
			return this.systemInfo.custom.width;
		},
		//小程序右侧需要留出气泡空间
		headerPaddingRight(){
			// #ifndef MP
			return 0;
			// #endif
			// #ifdef MP-WEIXIN
			return this.customWidth + 20;
			// #endif
		},
	},
	onLoad(option) {
		this.windowHeight = this.systemInfo.windowHeight
		if(option && option.cur) {
			this.tabCurrentIndex = option.cur-0 || 0
		}
		this.loadData()
	},
	methods: {
		BackPage() {
			this.$backPage()
		},
		hideModal(e) {
			this.modalName = null
		},
		inputChange(event) {
			const key = event.currentTarget.dataset.key;
			this.courier[key] = event.detail.value;
			console.log(this.courier);
		},
		idleOffshelve(productId) {
			this.$mTool.showModal({
				title: '提示',
				content: '是否要下架当前闲本？',
				success: res => {
					if (res.confirm) {
						Leisurely.idleOffshelve(productId).then(()=>{
							this.delIdle(productId)
							this.$mTool.showToast({
								title: '下架成功',
								mask: true
							})
						})
					}
				}
			})
		},
		idleRefreshTime(productId) {
			this.$mTool.showModal({
				title: '提示',
				content: '是否要刷新当前闲本？',
				success: res => {
					if (res.confirm) {
						Leisurely.idleRefreshTime(productId).then(()=>{
							this.$mTool.showToast({
								title: '刷新成功',
								mask: true
							})
						})
					}
				}
			})
		},
		delIdle(productId) {
			let currentList = this.navList[0].list;
			const index = currentList.findIndex(idle => idle.productId == productId)
			if (index > -1) {
			    currentList.splice(index, 1)
			}
		},
		deliveryDialog(orderId){
			this.modalName = 'DialogDelivery'
			this.courier.orderId = orderId
		},
		onDelivery(orderId) {
			// 确认发货
			let checkRes = this.$graceChecker.check(this.courier,
				this.$formRuleConfig['courier'])
			if (!checkRes) {
				this.$mTool.showToast({
					title: this.$graceChecker.error,
					icon: 'none',
					mask: true
				})
				return
			}
			Leisurely.idleDelivery(
				this.courier.orderId, 
				this.courier.couriercompany,
				this.courier.courierNumber
			).then(()=>{
				this.hideModal()
				this.$mTool.showToast({
					title: '发货成功',
					mask: true
				})
				this.initData()
			})
			
		},
		confirmReceipt(orderId) {
			// 确认收货
			Leisurely.idleReceipt(orderId).then(()=>{
				this.$mTool.showToast({
					title: '已经收货',
					mask: true
				})
				this.initData()
			})
		},
		
		confirmContact() {
			this.$mTool.showModal({
				title: '提示',
				content: '如需联系，请前往APP查看！',
				showCancel: false
			})
		},
		
		
		initData() {
			this.navList =  [
				{
					api: 'myReleaseIdleOrder',
					text: '我发布的',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					api: 'mySellIdleOrder',
					text: '我卖出的',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				},
				{
					api: 'myBuyIdleOrder',
					text: '我买到的',
					loaded: false,
					loadingType: 'more',
					pagenum: 0,
					list: []
				}
			]
			this.loadData()
		},
		loadData(source){
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			
			if(source === 'tabChange' && navItem.loaded === true){
				//tab切换只有第一次需要加载数据
				return;
			}
			if(navItem.loadingType === 'loading'){
				//防止重复加载
				return;
			}
			navItem.loadingType = 'loading';
			
			switch(index) {
				case 0: 
					this.myReleaseIdleOrder(navItem)
					break;	
				case 1:
					this.mySellIdleOrder(navItem)
					break;
				case 2: 
					this.myBuyIdleOrder(navItem)
					break;
			}	
		}, 
		//顶部tab点击
		tabSelect(e) {
			this.tabCurrentIndex = e.currentTarget.dataset.id;
			this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
		},
		//swiper 切换
		changeTab(e){
			this.tabCurrentIndex = e.target.current;
			this.scrollLeft = (e.target.current - 1) * 60
			this.loadData('tabChange');
		},
		async myReleaseIdleOrder(navItem) {
			navItem.pagenum = navItem.pagenum + 1
			let gameNewList = await Leisurely.myReleaseIdleOrder(navItem.pagenum)
			navItem.loaded = true
			gameNewList.forEach(item => {
				navItem.list.push(item)
			})
			if (gameNewList.length < 20) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		async mySellIdleOrder(navItem) {
			navItem.pagenum = navItem.pagenum + 1
			let gameNewList = await Leisurely.mySellIdleOrder(navItem.pagenum)
			navItem.loaded = true
			gameNewList.forEach(item => {
				navItem.list.push(item)
			})
			if (gameNewList.length < 20) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
		async myBuyIdleOrder(navItem) {
			navItem.pagenum = navItem.pagenum + 1
			let gameNewList = await Leisurely.myBuyIdleOrder(navItem.pagenum)
			navItem.loaded = true
			gameNewList.forEach(item => {
				navItem.list.push(item)
			})
			if (gameNewList.length < 20) {
				navItem.loadingType = 'noMore'
				return
			}
			navItem.loadingType = 'more'
		},
	},
	onPullDownRefresh() {
		let index = this.tabCurrentIndex;
		let navItem = this.navList[index];
		navItem.loaded =  false
		navItem.loadingType =  'more'
		navItem.pagenum =  0
		navItem.list = []
		this.loadData()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
}
</script>

<style lang="scss" scoped>
.mix-page-header{
	background-color: #fff;
	.content{
		position: fixed;
		left: 0;
		top: 0;
		z-index: 95;
		width: 100%;
	}
	.location-box{
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		padding: 0 24rpx;
		font-weight: 400;
		color: #000000;
	}
	.btn{
		width: 88rpx;
		height: 80rpx;
		padding: 10rpx 24rpx;
		position: relative;
	}
	.search-wrap{
		width: 0;
		flex: 1;
		font-size: 14px;
		color: #999;
		/* #ifdef H5 */
		margin-right: 24rpx;
		/* #endif */
		.nav{
			height: 100%;
			color: #666;
			.cu-item {
			    height: 80rpx;
			    line-height: 80rpx;
				font-weight: 400;
				font-size: 30rpx;
			    position: relative;
			}
		}
	}
}
.list-scroll-content{
	height: 100%;
	.search-form{
		background-color: #f9f9f9;
	}
}
.uni-input{
	display: flex;
	height: 100%;
	width: 100%;
	text-align: left;
	justify-content: flex-start;
	font-size: 26rpx;
	color: #000000;
}
</style>
